import { Wrapper } from "./styles";
import { Separator } from "@shadcn/separator";
import { NoteStatus } from "./components/NoteStatusIcon";
import { ReplyArea } from "@/ui/cpts/biz/XHSTalks/components/ReplyArea";
import { Wrapper as ReplyAreaPlaceholder } from "./components/ReplyArea/styles";
import { useViewModel } from "./model.view";
import { getValueOrDie } from "@common/utils";
import { Tabs } from "antd";
import { MessageList } from "@/ui/cpts/biz/XHSTalks/components/MessageList";

export function XHSTalks() {
  const {
    globalModels,
    commentToReply,
    setCommentToReply,
    sender,
    setSender,
    note,
    curTabKey,
    onTabSwitch,
    mentionRef,
    commentRef,
  } = useViewModel();

  return (
    <Wrapper className={"xhs-talks"}>
      <div className={"talks-controller"}>
        <NoteStatus note={note} />
      </div>
      <Separator />

      <div className={"talk-list"}>
        <Tabs
          activeKey={curTabKey}
          onChange={onTabSwitch}
          tabPosition={"left"}
          items={[
            {
              label: <div style={{ padding: "4px 0" }}>相关评论</div>,
              key: "mention",
              children: (
                <MessageList
                  key={`${note.noteId}_mention`}
                  category={"mention"}
                  commentReplyTo={commentToReply}
                  onReplyToClick={setCommentToReply}
                  realSender={sender}
                  ref={mentionRef}
                  noteDeleted={note.isDeleted}
                />
              ),
            },
            ...(note.isDeleted
              ? []
              : [
                  {
                    label: <div style={{ padding: "4px 0" }}>全部评论</div>,
                    key: "all",
                    children: (
                      <MessageList
                        key={`${note.noteId}_all_list`}
                        category={"all"}
                        commentReplyTo={commentToReply}
                        onReplyToClick={setCommentToReply}
                        realSender={sender}
                        ref={commentRef}
                      />
                    ),
                  },
                ]),
          ]}
        />
      </div>

      {curTabKey === "mention" && !commentToReply ? (
        <ReplyAreaPlaceholder>
          <div className={"reply-area__disable-mask"}>请选择要回复的评论</div>
        </ReplyAreaPlaceholder>
      ) : (
        <ReplyArea
          owner={getValueOrDie(globalModels.sessions[0].apps.xhs.user)}
          commentToReply={commentToReply}
          onCancelReplyToClick={() => setCommentToReply(undefined)}
          onSendClick={
            curTabKey === "all"
              ? commentRef.current?.post
              : mentionRef.current?.post
          }
          onSendAsChange={setSender}
        />
      )}
    </Wrapper>
  );
}
